<template>
	
	<view>
		
		<!-- 自定义导航栏 -->
		<view>
		        <u-navbar
				:fixed="false"
				title="就业信息"
				:safeAreaInsetTop="false"
				bgColor="#EEAD0E"
				style="font-weight:bold;"
				@leftClick="leftClick()"
				@rightClick="rightClick()">
		        	<view
		        	class="u-nav-slot"
		        	slot="left">
		        	
		        		
		        		<u-icon
		        		name="arrow-left"
		        		size="20"
						color="black"
						:bold="true"></u-icon>
		        	
		        	</view>		
							
							
					<view
					v-if="stuId!=''"
					class="u-nav-slot"
					slot="right">
					
						
						<u-icon
						name="edit-pen-fill"
						size="20"
						color="black"></u-icon>
					
					</view>
		        </u-navbar>
		</view>
		
		
			<!-- 我的就业信息 -->
		<view  v-if="this.stuId!=''">
			<uni-section title="我的就业信息" type="line" >
					
					
					
		
					<uni-group :title="'就业编号：'+employInfo.id" mode="card" >
						<view> <span style="color: lightslategray;">就业城市：</span>{{getPcaText(employInfo.employmenAddress)}} </view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> 
							<span style="color: lightslategray;">入职公司：</span>
							{{employInfo.employmenEnterprise}}
							</view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> 
							<span style="color: lightslategray;">职位：</span>
							<span style="margin-left: 65rpx;">{{employInfo.employmenPosition}}</span>
						</view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> 
							<span style="color: lightslategray;">offer：</span>
							<span style="margin-left: 55rpx;">{{employInfo.offer}}</span>
							
						</view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="1rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> <span style="color: lightslategray;">试用薪资：</span> {{employInfo.probationSalary}}<span style="color: lightslategray;">¥</span> </view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> 
							<span style="color: lightslategray;">薪资：</span>
							<span style="margin-left: 63rpx;">{{employInfo.employmenSalary}}</span>
							<span style="color: lightslategray;">¥</span>
						</view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> 
								<span style="color: lightslategray;">待遇：</span>
								<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
								<view style="width: 300px;">
									<u-read-more 
									:shadowStyle="shadowStyle" 
									textIndent="2em" 
									:toggle="true" 
									closeText="展开阅读全部"
									showHeight="20"
									style="position: relative;left: 10rpx;">
											<rich-text :nodes="employInfo.employmenTreatment"></rich-text>
									</u-read-more>
								</view>
						
						</view>
						
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> <span style="color: lightslategray;">入职时间：</span>{{employInfo.employmenTime}}  </view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						
						<view> <span style="color: lightslategray;">入职结果：</span> {{employInfo.employmenResult=='0'?'失败':'成功'}} </view>
						<u-divider :hairline="true" style="margin-bottom: 10rpx;margin-top: 1rpx;width: 70%;position: relative;left: 150rpx;"></u-divider><!-- 分割线 -->
						<u-gap height="35rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						<!-- v-if="employInfo.employmenResult==1" -->
						<view v-if="employInfo.employmenResult==0"> <span style="color: lightslategray;">失败原因：</span> 
						
						<u-button
								type="info" 
								:plain="true" 
								:hairline="true" 
								text="保存原因" 
								style="width:150rpx;height:70rpx;font-size: 12px;height:50rpx;position: relative;right: 90rpx;bottom:45rpx;"
								@click="saveFailureCause(messageInfo)"></u-button>
						</view>
						<!-- 失败原因展示 -->
						<view v-if="employInfo.employmenResult==0">
							<uni-easyinput type="textarea" :clearable='false' autoHeight v-model="employInfo.failureCause" placeholder="请输入内容"></uni-easyinput>
						</view>
					</uni-group>
					
					<uni-group mode="card" >
						<view> <span style="color: lightslategray;font-size: 12rpx;">创建时间：{{employInfo.createTime}}</span> </view>
						<u-gap height="15rpx" bgColor="#ffffff"></u-gap><!-- 间隔槽 -->
						<view> <span style="color: lightslategray;font-size: 12rpx;">更新时间：{{employInfo.updateTime}}</span> </view>
					</uni-group>
			</uni-section>
		</view>
		
		
		<!-- 消息提示 -->
		<view>
			<u-toast ref="uToast"></u-toast>
		</view>
		
		<!-- 无权限提示 -->
		<u-empty 
				v-if="stuId==''"
				width="100%" 
				height="100%"
		        mode="permission"
		        icon="/static/img/empty/无权限.png">
				<text style="color: darkgrey;">此功能仅对学生开放</text>
		</u-empty>
	
	</view>
</template>



<script>
	

	import data from 'china-area-data'
	import Area from './utils/Area.js'
	
	export default {
		data() {
			return {
				stuId:'',
				employInfo:{
					id:'',
					failureCause:'',
				},
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				messageInfo:{
					type: 'success',						
					message: "保存成功",
					position:'top'
				},
				Urls:{
					showEmployInfoByStuId:'/employmen/employmenInformation/showEmployInfoByStuId',//展示学生就业信息
					saveFailureCause:'employmen/employmenInformation/saveFailureCause',//保存失败原因
				}
			};
		},
		created() {
			  this.pcaData = new Area();

		},
		methods:{
			 getPcaText(code){//就业城市---地区号反推地区名
			        return this.pcaData.getText(code);
			 },
			showEmployInfoByStuId(){//展示学生就业信息
			
			
				console.log(this.Urls.showEmployInfoByStuId)
				console.log(this.stuId)
				this.$axios.post(this.Urls.showEmployInfoByStuId+"?stuId="+this.stuId).then(res=>{
					console.log(res)
					this.employInfo=res.data.result;
					
				});
			
				
			},
			saveFailureCause(messageInfo){//保存失败原因
				this.$axios.post(this.Urls.saveFailureCause+"?failureCause="+this.employInfo.failureCause+"&stuId="+this.employInfo.stuId).then(res=>{
					console.log(res.data.result)
					if(res.data.success){
						this.showToast(messageInfo);
					}
				});
			},
			onLoad(option){
				if(JSON.stringify(option)!="{}"){
					this.stuId = option.stuId;
				}else{
					alert("该功能仅对学员开放")
				}
			},
			onShow(){
				if(this.stuId!=""){
					this.showEmployInfoByStuId();
				}
			
			},
			rightClick() {//导航栏右侧按钮事件
				console.log('rightClick');
				uni.navigateTo({
					url: '/pages/service/employmentservice/employmenInfoUpdate/employmenInfoUpdate?stuId='+this.employInfo.stuId
				});
			},
			leftClick() {//导航栏左侧按钮事件
				console.log('leftClick');
				uni.switchTab({
					url: '/pages/service/home/home'
				})
			},
			showToast(params) {//失败原因消息提示
				this.$refs.uToast.show({
					...params
				})
			}
		

		
			
			
		}
	}
</script>

<style lang="scss">
.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
